<template>
  <div>
 <div class="hBg">
          <header>
            <div class="lMenu" @click="addrfun()">
                <span class="iconfont icon-wxbdingwei"></span>
                <span class="ad">西安市</span>
            </div>
            <div class="sreach">
                <div class="rMenu" @click="fun()">
                    <p class="iconfont icon-shouye"></p>
                    <p>开店</p>
                </div>
                <div class="rMenu" @click="fun2()">
                    <p class="iconfont icon-shouye1"></p>
                    <p>购物车</p>
                </div>
            </div>
      </header>
 </div>
      <aside class="banner">
          <img src="../../../public/wx/ban.webp" alt="">
      </aside>
  </div>
</template>

<script>
export default {
    methods:{
        fun(){
            this.$router.push("/shop")
        },
        fun2(){
            this.$router.push("/shopcart")
        },
        addrfun(){
            this.$router.push("/dz")
        }
    }

}
</script>

<style scoped>
.hBg{
    width: 100%;
    height: 3rem;
    position: relative;
    display: inline-block;
    background: url('../../../public/wx/hBg.jpeg') no-repeat center;
    background-size: 100%;
}
header{
    width: 100%;
    box-sizing: border-box;
    padding: 3% 3%;
    height: 1.2rem;
    color: white;
    display: flex;
    justify-content: space-between;
    color: #454545;
    
}
.sreach{
    display: flex;

}
.banner{
    width: 100%;
    position: absolute;
    top: 1.1rem;
}
.banner img{
    width: 100%;
}
.search{
    background: rgba(254, 254, 254, 0.3);
}
.iconfont{
    vertical-align: middle;
    font-size: .4rem;
}
.ad{
    margin-left: .1rem;
}
.lMenu{
    margin-top: .12rem;
    color: white;
}
.rMenu{
    text-align: center;
    margin-left: .4rem;
    color: white;
}
</style>